<template>
  <div id="consumption-dividend">
    <c-title text="消费分红"></c-title>
    <div class="top-pane">
      <img :src="memberData.member ? memberData.member.avatar_image : ''" alt="" v-if="memberData.member && memberData.member.avatar_image" />
      <span class="name">{{ memberData.member ? memberData.member.username : "" }}</span>
    </div>
    <div class="middle-num">
      <div class="num-rol">
        <span class="num">￥{{ memberData.rest_amount }}</span>
        <span class="num-name" @click="popupShow = true">剩余额度<van-icon name="arrow" /> </span>
      </div>
      <span class="line-rol"></span>
      <div class="num-rol">
        <span class="num">￥{{ memberData.sum_reward }}</span>
        <span class="num-name">累计奖励金额</span>
      </div>
    </div>
    <div class="middle-num">
      <div class="num-rol">
        <span class="num">￥{{ memberData.sum_ace }}</span>
        <span class="num-name">累计加速金额</span>
      </div>
      <span class="line-rol"></span>
      <div class="num-rol">
        <span class="num">￥{{ memberData.sum_exchange }}</span>
        <span class="num-name">累计转换额度</span>
      </div>
    </div>
    <div class="bottom-list">
      <van-tabs v-model="activeName" color="#F15353" title-active-color="#F15353" line-width="50px" @click="clickEvent">
        <van-tab title="额度记录" :name="1">
          <d-list :loading="loading" :finished="finished" @load="onLoad">
            <div :class="index + 1 == detailList.length ? 'detail-row no-detail-row' : 'detail-row'" v-for="(item, index) in detailList" :key="index">
              <div class="buy-rol">
                <span class="buy-name">{{ item.type_desc }}</span>
                <!-- active-color -->
                <span :class="filterAmount(item.change_amount) ? 'num-name active-color' : 'num-name'">{{ item.change_amount }}</span>
              </div>
              <div class="pool-rol">
                <span class="pool-name">{{ item.has_one_pool ? item.has_one_pool.name : "" }}</span>
                <span>{{ item.created_at }}</span>
              </div>
            </div>
          </d-list>
        </van-tab>
        <van-tab title="奖励记录" :name="2">
          <d-list :loading="loading" :finished="finished" @load="onLoad">
            <div :class="index + 1 == detailList.length ? 'detail-row no-detail-row' : 'detail-row'" v-for="(item, index) in detailList" :key="index">
              <div class="buy-rol">
                <span class="buy-name">ID：{{ item.id }}</span>
                <span class="num-name active-color">￥{{ item.amount }}</span>
              </div>
              <div class="pool-rol">
                <span>{{ item.finish_time_str }}</span>
              </div>
            </div>
          </d-list>
        </van-tab>
      </van-tabs>
    </div>
    <van-popup v-model="popupShow" round position="bottom" :style="{ height: '18rem' }" class="van-popup-bom">
      <van-icon name="cross" class="closeable" @click="popupShow = false" />
      <div class="title-text">查看额度明细</div>
      <template v-if="amountSummary.length">
        <div class="pool-popup" v-for="(item, index) in amountSummary" :key="index">
          <div class="po-detail">
            <span class="name">{{item.has_one_pool ? item.has_one_pool.name : ""}}</span>
            <span class="num">{{item.actual_amount}}</span>
          </div>
          <div class="po_point" v-if="memberData.exchange_state == 1" @click="toPoint(item)">
            转换积分
            <van-icon name="arrow" />
          </div>
        </div>
      </template>
    </van-popup>
  </div>
</template>
<script>
import index_controller from "./index_controller";

export default index_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
// ::v-deep .van-tabs__line {
//   bottom: 22px;
// }
#consumption-dividend {
  .top-pane {
    height: 6.8rem;
    background: #ff8924;
    display: flex;
    padding: 1.1rem 0.8rem 0.8rem 0.8rem;
    img {
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      margin: 0 0.2rem 0 0;
    }
    .name {
      font-size: 0.85rem;
      line-height: 3rem;
      color: #ffffff;
    }
  }
  .middle-num {
    background: white;
    padding: 1.1rem 0;
    margin: 0 0.8rem;
    display: flex;
    border-radius: 0.3rem;
    justify-content: space-evenly;
    position: relative;
    top: -1.2rem;
    .num-rol {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 0.2rem;
      .num {
        font-size: 0.9rem;
        color: #f14e4e;
        margin-bottom: 0.6rem;
        font-weight: bold;
      }
      .num-name {
        font-size: 0.75rem;
        color: #696969;
        display: flex;
        align-items: center;
      }
    }
    .line-rol {
      width: 0.05rem;
      background: #e7e7e7;
    }
  }
  .bottom-list {
    margin: 0 0.8rem;
    background: white;
    border-radius: 0.3rem;
    position: relative;
    top: -0.4rem;
    padding-top: 0.1rem;
    .no-detail-row {
      border-bottom: none !important;
    }
    .detail-row {
      padding: 0 0 0.8rem 0;
      margin: 0.8rem 0.8rem 0 0.8rem;
      border-bottom: 0.05rem solid #f2f2f2;
      .active-color {
        color: #f15353;
      }
      .num-name {
        display: flex;
        align-items: center;
        .icon {
          margin-bottom: 0.1rem;
        }
      }
      .buy-rol {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.85rem;
        font-weight: 400;
        color: #333333;
        margin-bottom: 0.4rem;
        line-height: 1;
      }
      .pool-rol {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.8rem;
        font-weight: 400;
        color: #999999;
      }
    }
  }
  .van-popup-bom {
    padding-bottom: 0.8rem;
    .closeable {
      font-size: 0.95rem;
      position: absolute;
      top: 0.65rem;
      right: 0.8rem;
      color: #333333;
    }
    .title-text {
      margin: 1.5rem 0;
      font-size: 0.85rem;
      font-weight: 400;
      color: #333333;
    }
    .pool-popup {
      padding-top: 0.6rem;
      padding-bottom: 0.6rem;
      margin: 0 0.85rem;
      border-radius: 0.3rem;
      padding-left: 0.06rem;
      padding-right: 0.06rem;
      margin-bottom: 0.6rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .po_point{
        display: flex;
        align-items: center;
        color: #F15353;
      }
      .po-detail {
        display: flex;
        flex-direction: column;
        width: 30%;
        .name {
          font-size: 0.8rem;
          font-weight: 400;
          color: #999999;
          margin-bottom: 0.4rem;
        }
        .num {
          font-size: 0.8rem;
          font-weight: bold;
          color: #333333;
        }
      }
    }
  }
}
</style>
